<template>
	<view class="container" v-if="!isLoadingModal">
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#FF2D5E">
				<swiper-item v-for="(item, index) in gallary" :key="index">
					<view class="swiper-item"><image class="img" :src="item" mode=""></image></view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="h1">
			<text>{{name}}</text>
		</view>

		<view class="price_sell">
			<view class="price">
				<text class="i">￥</text>
				<text class="b">{{data.attr[currentSpec].price}}</text>
				<text class="u">￥{{data.market_price}}</text>
			</view>
			
			<text class="sell">已售{{data.sales_num}}件</text>
		</view>
		
		<view class="tags">
			<view class="tag">
				<text>分享赚¥{{data.share_commission}}</text>
			</view>
		</view>
		
		<view class="params">
			<view class="row" @click="onBackClick">
				<view class="label">
					选择
				</view>
				
				<view class="value">
					{{data.attr[currentSpec].name}}
					
					<image src="../../../static/fanli/9.png" mode="" class="icon"></image>
				</view>
			</view>
		</view>

		<view class="good_num">
			<text>商品编号：{{id}}</text>
			<view class="a">
				复制
			</view>
		</view>
		
		<view class="good_like">
			<view class="con">
				<view class="dt">
					<view class="b">{{data.like_num}}</view>个赞赏
				</view>
				
				<view class="people" v-if="data && data.like">
					<image v-for="(item, index) in data.like" :key="index" :src="item.head" class="avatar"></image>
				</view>
			</view>
			<view class="a">
				点赞
			</view>
		</view>
		
		<view class="hot-goods">
			<view class="title">
				猜你喜欢
			</view>
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="6000" indicator-active-color="#FF2D5E">
				<swiper-item v-for="(good, key) in hotGood" :key="key">
					<view class="swiper-item hot-good-list">
						<view class="item" v-for="(item, index) in good" :key="index" @click="onGoodClick(item, index)">
							<image :src="item.main_pic" mode="" class="pic"></image>
							
							<view class="cite">
								<text class="name">{{item.goods_name || item.title}}</text>
								<view class="row">
									<view class="quan" v-if="item.itemfee_coupon">
										<text>券{{item.itemfee_coupon}}</text>
									</view>
									
									<view class="fan">
										<text>返{{item.buy_commission}}</text>
									</view>
								</view>
								<view class="price">
									<text class="i">￥</text>
									<text class="b">{{item.shop_price || item.itemfee_final}}</text>
									<text class="u">￥{{item.market_price || item.itemfee}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		
		<view class="detail_title bdt">
			<view class="li" :class="currentTab == 0 ? 'current' : ''" @click="onTabClick(0)">
				<text>商品详情</text>
			</view>
			<view class="li" :class="currentTab == 1 ? 'current' : ''" @click="onTabClick(1)">
				<text>评论</text>
			</view>
			<view class="li" :class="currentTab == 2 ? 'current' : ''" @click="onTabClick(2)">
				<text>商家信息</text>
			</view>
		</view>
		
		<view class="detail" v-show="currentTab == 0" v-html="content"></view>
		
		<view class="comment" v-show="currentTab == 1">
			<view class="tags">
				<view class="li" :class="currentComment == 0 ? 'current' : ''" @click="onCommentClick(0)">全部({{data.comment.all}})</view>
				<view class="li" :class="currentComment == 1 ? 'current' : ''" @click="onCommentClick(1)">好评({{data.comment.good}})</view>
				<view class="li" :class="currentComment == 2 ? 'current' : ''" @click="onCommentClick(2)">中评({{data.comment.med}})</view>
				<view class="li" :class="currentComment == 3 ? 'current' : ''" @click="onCommentClick(3)">差评({{data.comment.bad}})</view>
			</view>
			
			<view class="ul" v-show="!commentList.length">
				<view class="none">暂无评论</view>
			</view>
			
			<view class="ul" v-show="commentList.length">
				<view class="li" v-for="(item, index) in commentList" :key="index">
					<view class="top">
						<image :src="item.head" class="pic"></image>
						<view class="p">
							{{item.name}}
						</view>
					</view>
					
					<view class="i">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="shop_detail" v-show="currentTab == 2">
			<view class="top">
				<image :src="data.shop.head" mode="" class="pic"></image>
				<view class="dfn">
					<view class="name">
						{{data.shop.name}}
					</view>
				</view>
			</view>
			
			<view class="ul">
				<view class="li">
					<view class="lb">主营商品</view>
					<view class="txt">
						{{data.shop.business}}
					</view>
				</view>
				<view class="li">
					<view class="lb">商家地址</view>
					<view class="txt">
						{{data.shop.address}}
					</view>
				</view>
				<view class="li">
					<view class="lb">联系方式</view>
					<view class="txt">
						{{data.shop.mobile}}
					</view>
				</view>
				<view class="li">
					<view class="lb">商家介绍</view>
					<view class="txt">
						{{data.shop.introduce}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer_tmp"></view>
		
		<view class="footer">
			<button class="btn btn_home" @click="onBackHomeClick">
				<text>首页</text>
			</button>
			<button class="btn btn_home bdl" @click="onDataErrorClick">
				<text>纠错</text>
			</button>
			<button class="btn btn_share" @click="onShareClick">
				<text class="b">分享赚</text>
			</button>
			
			<button class="btn btn_buy" @click="onBuyClick">
				<text class="b">自购省</text>
			</button>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup_con">
				<view class="info">
					<image :src="gallary[0]" mode="" class="pic"></image>
					<view class="cite">
						<view class="price_sell">
							<view class="price">
								<text class="i">￥</text>
								<text class="b">{{data.attr[currentSpec].price}}</text>
							</view>
						</view>
						<view class="price_sell">
							<text class="sell">剩余{{data.attr[currentSpec].stock}}件</text>
						</view>
					</view>
				</view>
				
				<view class="select" v-if="data.attr">
					<text class="label">规格选择</text>
					
					<view class="con">
						<view class="item" v-for="(item, index) in data.attr" :key="index" :class="currentSpec == index ? 'current' : ''" @click="onSpecClick(index)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				
				<view class="num">
					<text class="label">购买数量</text>
					
					<view class="input_bar">
						<view class="btn prev" @click="onNumberChange(false)">
							<text>-</text>
						</view>
						
						<input class="input" type="number" v-model="number" />
						
						<view class="btn next" @click="onNumberChange(true)">
							<text>+</text>
						</view>
					</view>
				</view>
				
				<view class="btn_submit" @click="onSubmitClick">
					<text>确定</text>
				</view>
				
				<image src="../../../static/fanli/17.png" mode="" class="close" @click="onPopupCloseClick"></image>
			</view>
		</uni-popup>
		
		<good-share  ref="goodShare" />
	</view>
</template>

<script>
	import { JSMRequest } from '@/module/api'
	import { encodeGoodId } from '@/common/util'
	import GoodShare from '@/components/good-share/good-share'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	const _ = require("@/libs/underscore/underscore-min.js")._

	export default {
		components: {uniPopup, GoodShare, uniLoadMore},
		data() {
			return {
				scrollTop: 0,
				statusBarHeight: 0,
				id: null,
				key: null,
				isLoadingView: false,
				isLoadingModal: true,
				isLoadingFail: false,
				isSupplierGood: true,
				errMsg: '系统繁忙，请稍候再试',
				gallary: [],
				name: '',
				shop_id: null,
				shop_name: '',
				address: '',
				phone: '',
				content: '',
				license: '',
				data: null,
				number: 1,
				currentColor: 0,
				currentSpec: 0,
				currentTab: 0,
				currentComment: 0,
				pageType: 1,
				hotGood: []
			};
		},
		
		computed: {
			shareAppMessage () {
				let invite = this.userInfo.code || ""
				let id = this.id
				let scene = encodeURIComponent(`iv=${invite}&p=sgd&id=${id}`)
				return !this.data ? this.$store.state.shareAppMessage : {
					title: this.name,
					path: `/pages/index/index?scene=${scene}`,
					imageUrl: this.gallary[0] || ""
				}
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			headerStyle () {
				let opacity = 0
				if(this.scrollTop > 0){
					opacity = this.scrollTop / 184
					if(opacity > 1) opacity = 1
				}
				return "opacity: " + opacity + ";padding-top: " + this.statusBarHeight + "px;"
			},
			
			headerStyleDown () {
				let opacity = 0
				if(this.scrollTop > 0){
					opacity = this.scrollTop / 184
					if(opacity > 1) opacity = 1
				}
				opacity = 1 - opacity
				return "opacity: " + opacity + ";padding-top: " + this.statusBarHeight + "px;"
			},
			
			commentList () {
				let { data } = this
				if(!data || !data.comment || !data.comment.list) return []
				return data.comment.list
			},
		},
		
		onShareAppMessage () {
			return this.shareAppMessage
		},
		
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		
		onReady () {
			let _t = this
			uni.getSystemInfo({
				success: res => {
					// console.log(res)
					_t.statusBarHeight = res.statusBarHeight
				}
			})
		},
		
		onLoad(params) {
			let _t = this
			this.id = params.id || null
			this.key = params.key || null
			this.pageType = params.pageType || 1
			this.isSupplierGood = params.isSupplierGood == 1
			this.onPageRefresh()
		},
		
		watch:{
			number () {
				if(this.number <= 0) this.number = 1
			}
		},
		
		methods: {
			onBackHomeClick () {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			
			onDataErrorClick () {
				uni.navigateTo({
					url: "/pages/home/good-detail-error/good-detail-error?id=" + this.id
				})
			},
			
			onBackClick () {
				uni.navigateBack({})
			},
			
			onShareClick () {
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				let _t = this
				let codeStr = '- - -$￥' + encodeGoodId(_t.id.toString()) + '2￥$- - -';
				let copyText = ''
						
				copyText = "[京商盟]" + this.name
				
				this.$refs.goodShare.show({
					id: this.id,
					type: 2,
					text: copyText
				})
			},
			
			onCommentClick (index) {
				this.currentComment = index
			},
			
			onTabClick (index) {
				this.currentTab = index
			},
			
			onPageRefresh () {
				let _t = this
				let data = {}
				// data.uid = this.userInfo.id
				// data.type = this.pageType
				if(this.id != null) data.good_id = this.id
				if(this.key != null) data.key = this.key
				
				JSMRequest({
					tag: "jsm-self-good-detail",
					params: data
				}).then(( { data } ) => {
					
					_t.isLoadingModal = false
					_t.loadingMore = false
					_t.isEmpty = true
					_t.data = data
					_t.id = data.id
					_t.gallary = data.gallary
					_t.name = data.goods_name
					_t.shop_id = data.shop.id
					_t.shop_name = data.shop.shop_name
					_t.address = data.shop.address
					_t.phone = data.shop.mobile
					_t.license = data.shop.business
					_t.content = data.editorValue.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
					
					uni.setNavigationBarTitle({
						title: data.goods_name
					})
					
					let hot = []
					let num = 6
					data.guess.forEach((item, index) => {
					    let page = Math.floor(index / num); // 计算该元素为第几个素组内
					    if (!hot[page]) { // 判断是否存在
					      hot[page] = [];
					    }
					    hot[page].push(item);
					})
					_t.hotGood = hot
				}).catch(e => {
					_t.isLoadingModal = false
					_t.isLoadingFail = true
					_t.errMsg = e.msg
				})
			},

			onBuyClick () {
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				this.$refs.popup.open()
			},
			
			onSpecClick (index) {
				this.currentSpec = index
			},
			
			onColorClick (index) {
				this.currentColor = index
			},
			
			onGoodClick (item, index){
				// console.log(item)
				if(item.item_id){
					uni.navigateTo({
						url: "/pages/home/good-detail/good-detail?id=" + item.item_id
					})
				}else{
					uni.navigateTo({
						url: "/pageSupplier/supplier/good-detail/good-detail?isSupplierGood=0&id=" + item.id
					})
				}
			},
			
			onNumberChange (up) {
				if(up){
					this.number ++
				}else{
					this.number --
				}
			},
			
			onSubmitClick () {
				this.onPopupCloseClick()
				uni.navigateTo({
					url: "/pages/cart/confirm/confirm?params=" + JSON.stringify({
						goodId: this.id,
						goodName: this.name,
						goodNumber: this.number,
						goodSpec: this.data.attr[this.currentSpec]
					})
				})
			},
			
			onPopupCloseClick () {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		position: fixed;
		width: 100%;
		height: 92px;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0;
		background: #FF5757;
		// background:linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
		
		&.bgnone{
			background: none;
			opacity: 1;
		}
		
		.btn-back{
			width: 92px;
			height: 92px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: none;
			
			.icon{
				width: 28px;
				height: 28px;
			}
			
			.icon2{
				width: 52px;
				height: 52px;
			}
		}
	}
	
	.banner{

		.swiper{
			width: 750px;
			height: 750px;
			overflow: hidden;
		}
		
		.swiper-item{

			.img{
				width: 100%;
				height: 750px;
			}
		}
	}
	
	.h1{
		padding: 30px 30px 0;
		
		text{
			font-size: 34px;
			color: '#333'
		}
	}
	
	.h2{
		padding: 30px 30px 0;
		
		text{
			font-size: 30px;
			color: '#333'
		}
	}
	
	.address{
		padding: 0px 30px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		
		text{
			font-size: 22px;
			color: #666;
			max-width: 660px;
		}
		
		.icon{
			margin-right: 8px;
			width: 20px;
			height: 20px;
		}
	}
	
	.card{
		padding: 0px 30px 0;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.li{
			width: 335px;
			height: 76px;
			box-shadow: 0px 4px 24px 0px rgba(181,193,229,0.35);
			border-radius: 6px;
			background: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			.icon{
				width: 28px;
				height: 28px;
				margin-right: 20px;
			}
			
			text{
				font-size: 28px;
				color: #333;
			}
		}
	}

	.detail{

	}

	.price_sell{
		padding: 0px 30px 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.price{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10px;
			
			.i{
				font-size: 24px;
				color: #FF2D5E;
				padding-top: 8px;
			}
			
			.b{
				font-size: 36px;
				color: #FF2D5E;
			}
			
			.u{
				font-size: 24px;
				color: #999;
				padding-top: 8px;
				text-decoration: line-through;
				padding-left: 4px;
			}
		}

		.sell{
			font-size: 24px;
			color: #666;
		}
	}
	
	.detail_title{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 96px;
		margin-top: 30px;
		
		text{
			font-size: 30px;
			color: #666;
		}
		
		.li{
			width: 33.33333%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		
		.current{
			text{
				color: #FF2D5E;
			}
		}
		
		&.bdt{
			border-top: 20px solid #F1F1F1;
		}
	}
	
	.tags{
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 0 30px;
		
		.tag{
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #FF2D5E;
			border-radius: 6px;
			padding: 4px 10px;
			margin-right: 10px;
			margin-top: 10px;
			
			text{
				font-size: 22px;
				color: #FF2D5E;
			}
			
		}
	}

	.params{
		margin: 0 30px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 15px 0;
		margin-top: 30px;

		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			padding: 6px 0;

			.label{
				font-size: 28px;
				color: #999;
			}

			.value{
				font-size: 28px;
				color: #333;
				display: flex;
				align-items: center;
				
				.icon{
					width: 32px;
					height:32px;
					margin-left: 10px;
				}
			}
		}
	}
	
	.footer_tmp{
		height: 100px;
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.btn{
			width: 35%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 0;
			line-height: 1.25;
			
			text{
				color: #FFFFFF;
				font-size: 24px;
			}
			
			.b{
				font-size: 32px;
			}
			
			&.bdl{
				border-left: 1px solid #eee;
			}
		}
		
		.btn_home{
			width: 15%;
			background: #FFFFFF;
			
			text{
				color: #333333
			}
		}
		
		.btn_buy{
			background:linear-gradient(270deg,rgba(255,92,120,1) 0%,rgba(231,38,31,1) 100%);
		}
		
		.btn_share{
			background: #333333;
		}
	}
	
	.popup_con{
		height: 900px;
		width: 750px;
		position: relative;
		box-sizing: border-box;
		padding-top: 240px;
		
		.info{
			display: flex;
			align-items: center;
			padding: 0 30px;
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: -30px;
			
			.pic{
				width: 240px;
				height: 240px;
				border-radius: 12px;
			}
		}
		
		.close{
			width: 40px;
			height: 40px;
			position: absolute;
			right: 30px;
			top: 30px;
		}
		
		.btn_submit{
			width: 100%;
			height: 100px;
			background: linear-gradient(90deg,rgba(232,39,32,1) 0%,rgba(255,77,123,1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			bottom: 0;
			
			text{
				font-size: 32px;
				color: #FFFFFF;
			}
		}
		
		.num{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 30px;
			margin-top: 40px;
			
			.label{
				font-size: 30px;
				color: #333;
			}
			
			.input_bar{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			
			.btn{
				width: 48px;
				height: 48px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
				background-color: #E6E6E6;
			
				text{
					font-size: 30px;
					color: #666;
				}
			}
			
			.input{
				border-radius: 8px;
				background-color: #E6E6E6;
				width: 60px;
				margin: 0 4px;
				height: 48px;
				text-align: center;
				font-size: 24px;
				color: #333333;
			}
		}
		
		.select{
			padding: 0 30px;
			
			.label{
				font-size: 30px;
				color: #333333;
				padding-bottom: 10px;
			}
			
			.con{
				flex-direction: row;
				display: flex;
				flex-wrap: wrap;
				
				.item{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 60px;
					padding: 0 16px;
					border-radius: 16px;
					background-color: #F0F0F0;
					margin-top: 20px;
					margin-right: 20px;
					
					text{
						font-size: 26px;
						color: #333333;
					}
					
					&.current{
						background-color: #FFD9DE;
						
						text{
							color: #E7261F;
						}
					}
				}
			}
		}
	}
	
	.good-list{
		// min-height: 994px;
		padding: 20px 30px 0;
	}
	
	.good_num{
		display: flex;
		padding: 20px 30px;
		
		text{
			font-size: 24px;
			color: #999;
		}
		
		.a{
			font-size: 24px;
			color: #E7261F;
			margin-left: 20px;
		}
	}
	
	.good_like{
		border-top: 20px solid #F1F1F1;
		padding: 20px 30px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.a{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #E7261F;
			height: 40px;
			border-radius: 36px;
			border: 1px solid #E7261F;
			padding: 0 24px;
		}
		
		.con{
			width: 70%;
			
			.dt{
				display: flex;
				font-size: 24px;
				color: #666;
				
				.b{
					color: #E7261F;
				}
			}
			
			.people{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				
				.avatar{
					width: 50px;
					height: 50px;
					border-radius: 100%;
					margin-top: 20px;
					margin-right: 20px;
				}
			}
		}
	}
	
	.hot-goods{
		border-top: 20px solid #F1F1F1;
		
		.title{
			padding: 30px 30px 0;
			font-size: 32px;
			color: #333333;
		}
		
		.swiper{
			height: 900px;
		}
	}
	
	.hot-good-list{
		display: flex;
		flex-wrap: wrap;
		padding-left: 30px;
		padding-top: 30px;
		
		.item{
			width: 220px;
			background: #FFFFFF;
			border-radius: 12px;
			overflow: hidden;
			margin-right: 15px;
			margin-bottom: 15px;
			
			.pic{
				width: 220px;
				height: 220px;
			}
			
			.cite{
				padding: 10px;
				
				.name{
					width: 100%;
					font-size: 28px;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				
				.price{
					margin-top: 20px;
					display: flex;
					
					.i{
						font-size: 24px;
						color: #FF3660;
						padding-top: 8px;
					}
					
					.b{
						font-size: 30px;
						color: #FF3660;
					}
					
					.u{
						font-size: 22px;
						color: #999;
						padding-top: 8px;
						text-decoration: line-through;
					}
				}
				
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;
					
					.quan{
						background: linear-gradient(to right, #fd4a29 , #ff6f18);;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #FFFFFF;
						}
					}
					
					.fan{
						background: #333333;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-left: 10px;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #fee7c7;
						}
					}
				}
			}
			
			
		}
	}
	
	.shop_detail{
		
		.top{
			padding: 30px 30px;
			border-bottom: 20px solid #F1F1F1;
			display: flex;
			align-items: center;
			
			.pic{
				width: 100px;
				height: 100px;
			}
			
			.dfn{
				padding-left: 30px;
				max-width: calc(~"100% - 130px");
				
				.name{
					font-size: 28px;
					color: #333333;
				}
			}
		}
		
		.ul{
			background: #FFFFFF;
			padding: 0 30px;
			
			.li{
				border-bottom: 1px solid #ddd;
				padding: 30px 0;
				font-size: 28px;
				color: #333333;
				display: flex;
				
				.lb{
					width: 140px;
				}
				
				.txt{
					width: calc(~"100% - 140px");
					color: #666;
				}
			}
		}
	}
	
	.comment{
		
		.tags{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30px 30px;
			
			.li{
				font-size: 24px;
				color: #666;
				padding: 10px 30px;
				border-radius: 60px;
				margin-right: 20px;
				margin-top: 20px;
				background: #F1F1F1;
				
				&.current{
					color: #E7261F;
				}
			}
		}
		
		.ul{
			border-top: 20px solid #F1F1F1;
			min-height: 400px;
			
			.none{
				height: 400px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.li{
				padding: 20px 30px;
				border-bottom: 1px solid #ddd;
				
				.top{
					display: flex;
					align-items: center;
					
					.pic{
						width: 60px;
						height: 60px;
						border-radius: 60px;
						margin-right: 30px;
					}
					
					.p{
						font-size: 24px;
						color: #333333;
					}
				}
				
				.i{
					font-size: 24px;
					color: #666;
					padding-top: 20px;
				}
			}
		}
	}
</style>
